<template>

<cwCommon :type="type"
          :financeData="form"
          @changeClvData="chageClvList"
          @clear="clearForm"
          :name="cw"
>
     <el-form-item label="差旅详情">
       <el-table
         :data="form.clv_list"
         tooltip-effect="dark"
         style="width: 100%;"
         :summary-method="getSummaries"
         show-summary
       >
         <el-table-column label="差旅名称" width="150px">
           <template slot-scope="scope">
             <el-input v-model="scope.row.name" ></el-input>
           </template>
         </el-table-column>

         <el-table-column label="差旅日期"  align="center">
           <template slot-scope="scope">
             <el-date-picker
               size="mini"
               v-model="scope.row.date"
               type="daterange"
               range-separator="至"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
               @blur="getClvCost(scope)"
               value-format="yyyy-MM-dd"
               :picker-options="{ disabledDate: disabledDate }"
               style="width: 220px"
             >
             </el-date-picker>
           </template>
         </el-table-column>

         <el-table-column label="差旅人员">
           <template slot-scope="scope">
             <el-tag
               :key="i"
               v-for="(item,i) in scope.row.staff_list"
               closable
               :disable-transitions="false"
               @close="handleClose(item,scope)">
               {{item}}
             </el-tag>
             <el-input
               class="input-new-tag"
               v-if="scope.row.inputVisible"
               v-model="scope.row.inputValue"
               ref="saveTagInput"
               size="mini"
               @blur="handleInputConfirm(scope)"
             >
             </el-input>
             <el-button v-else class="button-new-tag" size="mini" @click="showInput(scope)">添加</el-button>
           </template>
         </el-table-column>
         <el-table-column label="性别" width="100px">
           <template slot-scope="scope">
             <el-select v-model="scope.row.sex" placeholder="请选择"  size="mini" @change="getClvCost(scope)">
               <el-option :value="1" label="男"></el-option>
               <el-option :value="2" label="女"></el-option>
             </el-select>
           </template>
         </el-table-column>
         <el-table-column label="城市等级" width="120px">
           <template slot-scope="scope">
             <el-select v-model="scope.row.city_level" value-key="id" size="mini" placeholder="请选择" @change="getClvCost(scope)">
               <el-option
                 v-for="(item,i) in city_list"
                 :key="i"
                 :label="item.name"
                 :value="item.id">
               </el-option>
             </el-select>
           </template>
         </el-table-column>

         <el-table-column label="出差天数" width="80px">
           <template slot-scope="scope">
             <el-input v-model="scope.row.day" size="mini" disabled ></el-input>
           </template>
         </el-table-column>

         <el-table-column label="出差费用" width="120px">
           <template slot-scope="scope">
             <el-input v-model="scope.row.cost" size="mini" disabled></el-input>
           </template>
         </el-table-column>

         <el-table-column label="出差城市" width="100px">
           <template slot-scope="scope">
             <el-input v-model="scope.row.city" size="mini"></el-input>
           </template>
         </el-table-column>
         <el-table-column label="操作" width="80px">
           <template slot-scope="scope">
             <el-button
               size="mini"
               type="danger"
               @click="delClv(scope)"
             >
               删除
             </el-button>
           </template>
         </el-table-column>

         <div slot="append" style="text-align: center;margin: 10px;">
           <el-button type="primary" @click="addClv">添加差旅</el-button>
         </div>

       </el-table>

     </el-form-item>
</cwCommon>

</template>

<script>
  import {getClvFee} from '@/apilist/Finance'
  import {mapState,mapActions} from 'vuex'
  import cwCommon from "./cwCommon";
  import ca from "element-ui/src/locale/lang/ca";
    export default {
        name: "cwClv",
        data(){
            return {
                staff_list:[],
                city_list: [
                  {id:"1",name:'一线'},
                  {id:"2",name:'二线'},
                  {id:"3",name:'三线'},
                  {id:"4",name:'四线'}],
                type: 1,
                form: {
                    clv_list: [],
                    name: '差旅费',
                    money: '',
                },
                cw: '差旅',
              //inputVisible: false,
              //inputValue: ''
            }
        },
        methods:{
          handleClose(tag,scope) {
            let row = scope.row
            let index = scope.$index
            let staffs = row.staff_list
             staffs.splice(staffs.indexOf(tag), 1)
            // 创建新对象保持独立性
            const newItem = {
              ...this.form.clv_list[index], // 保留其他属性
              staff_list: staffs
            }
            // 使用 Vue.set 确保响应式
            this.$set(this.form.clv_list, index, newItem)
            this.getClvCost(scope)
          },

          showInput(scope) {
            const row = scope.row
            const index = scope.$index

            // 创建新对象保持独立性
            const newItem = {
              ...this.form.clv_list[index], // 保留其他属性
              inputVisible: true,
              inputValue: row.staff_list.includes(row.inputValue)
                ? row.inputValue
                : ''
            }

            // 使用 Vue.set 确保响应式
            this.$set(this.form.clv_list, index, newItem)
          },

          handleInputConfirm(scope) {
            let row = scope.row
            let index = scope.$index
            let inputValue = row.inputValue;
            let staffs = row.staff_list
            if (inputValue) {
              staffs.push(inputValue);
            }
            const newItem = {
              ...this.form.clv_list[index], // 保留其他属性
              inputVisible: false,
              inputValue:  '',
              staff_list: staffs
            }

            // 使用 Vue.set 确保响应式
            this.$set(this.form.clv_list, index, newItem)
            this.getClvCost(scope)
          },
            getSummaries(param){
                const { columns, data } = param;
                let sum = 0;

                this.form.clv_list.forEach((row,index) => {
                    sum += this.fun.resetMoney(row.cost)
                })
                sum = this.fun.fmoney(sum)
                this.form.money = sum
                return ['总计','','',sum,'']
            },

            addClv(){
            //{name:'',staff_list:[],date:[],day:'',city_level:"1",cost:0,city:'', id: 0,sex:1,inputVisible:false,inputValue:''}
            let clv = {
                name: '',
                staff_list: [],
                date: [],
                day: '',
                city_level: 1,
                cost: 0,
                city: '',
                id: 0,
                sex: 1,
                disabled: false,
                inputVisible: false,
                inputValue: ''
            }
                this.form.clv_list.push(clv)
            },

            //计算差旅费用
            getClvCost(scope){
                try {
                  const {$index: index, row} = scope
                  getClvFee(row).then(res => {
                    this.form.clv_list[index].day = res.data.day
                    this.form.clv_list[index].cost = res.data.cost
                  })
                }catch (error){
                  this.$message.error(error.message);
                }
            },
            //修改差旅
            chageClvList(clvList){
                this.form.clv_list = clvList;
                this.$forceUpdate();
            },
          clearForm(){
            this.form.clv_list = [];
          },
          disabledDate(date) {
            // 获取当前日期
            const today = new Date();
            // 计算15天前的日期
            const fifteenDaysAgo = new Date();
            fifteenDaysAgo.setDate(today.getDate() - 15);

            // 禁用15天前的日期
            return date < fifteenDaysAgo;
          },
          //检查名称是否重复
          checkClvName(scope){
            try {
              const {$index: index, row} = scope
              this.form.clv_list.forEach((v, i) => {
                if (i != index && row['name'] == v['name']) {
                  throw new Error(`差旅名称${row['name']}重复,请检查`)
                }
              });
            }catch (e) {
              this.$message.error(e.message)
            }
          },
          delClv(scope){
            const {index, row} =  scope
            this.$confirm('是否删除此次差旅?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.form.clv_list.splice(index,1)
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          }

        },
        computed:{
            ...mapState("Setdata",['user_all']),
        },
        components:{cwCommon}

    }
</script>

<style scoped>

</style>
